Warn / Error

The resource "~~" was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate `as` value and it is preloaded intentionally.

Cause

위 에러는 리소스를 사전 다운로드 해두었는데 사용하지 않았다는, 그로 인해 네트워크 대역폭, CPU 등 자원 낭비가 발생중이라고 알리는 경고이다. Next.js에서 이미지에 loading=eager 속성을 적용할 경우, 이미지를 사전로딩하게 되고 위와 같은 경우가 발생할 수도 있게 된다.

이 문제는 보통 동적 대응을 위해 fill을 사용하였으나, sizes 속성을 적절하게 적용되지 않은 경우에 발생한다. 적절한 값을 인지하지 못해, 같은 이미지를 서로 다른 사이즈로 두번 이상 요청하게 되어, 사용하지 않는 이미지가 남게되어 경고가 발생하게 된다.

번외로, 화면 사이즈를 변경(특히 큰 화면 => 작은 화면)하고 새로 고침을 누르게 되면, 위 에러가 발생하기도 한다. 이것이 캐시 때문인지 sizes 값을 더 정밀하게 설정해야 하는지.. 아직 명확지 않다. 다만 실제 환경에서 이와 같은 일은 거의 없을 것이기에 딱히 문제없지 않을까.. 싶다.

Solve

이미지들에 최적화를 생각한 적절한 sizes 값을 잘 넣어 주도록 하자.. 아니면, 정말 빠른 로딩이 필요한 이미지가 맞는지 검토하여 eager 속성을 빼는 것도 하나의 방법이다.